<template>
  <div class="row col">
    <div class="col">
      <q-list bordered class="q-ma-md">
        <q-item v-ripple v-for="(item, index) in forumTopList" :clickable="true" :key="index" @click="returnForumId(item.id)">
          <q-item-section>
            <div style="display: flex">
              <q-avatar size="30px">
                <q-img style="width: 30px; height: 30px" :src="imagePath(item.avatar)"></q-img>
              </q-avatar>
              <q-item-label style="font-size: 15px">{{ item.unnamed }}</q-item-label>
            </div>
            <div style="display: flex;line-height: 1.5em;max-height: 3em;overflow: hidden;text-overflow: ellipsis">
              <div style="display: inline-block;width: 60%;">
                {{ item.forumText }}
              </div>
              <div style="width: 30%;padding: 0;display: flex;">
                <viewer class="label-list q-mb-sm" style="max-height: 50px" ref="viewer" :options="options" :images="item.viedoUrls" v-if="item.viedoUrls && item.viedoUrls.length > 0" @inited="inited">
                  <img :src="item.viedoUrls[0]" style="object-fit: contain; max-height: 100%; max-width: 150px" />
                </viewer>
              </div>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-between;">
              <div>
                <q-icon name="mdi-chat-processing-outline" size="15px" style="text-align: center"></q-icon>回复{{ item.childForums.length }}
              </div>
              <div style="display: flex;">
                <q-icon name="mdi-thumb-up-outline" color="black-4" size="15px" style="text-align: center" @click="addLike(item.id)">{{ '点赞' + item.likeNum }}</q-icon>
              </div>
              <div>

              </div>
            </div>
          </q-item-section>
        </q-item>
      </q-list>
    </div>
  </div>
</template>

<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

export default {
  name: 'ForumTop',
  components: {},
  props: {
    forumTopList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      imgUrl: `${process.env.BASE_URL}/sys/common/static`,
      options: {
        title: false,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 初始化预览组件
    inited(viewer) {
      this.$viewer = viewer;
    },
    imagePath(src) {
      let path = '';
      if (src) {
        if (src.startsWith('http')) {
          return src;
        }
        path = `${this.imgUrl}/${src}`;
      }
      return path;
    },
    returnForumId(forumId) {
      this.$emit('showFDialog', forumId);
    },
  },
  created() { },
  mounted() { },
};
</script>
<style lang="stylus"
       scope></style>
